<template>
    <div>
      <van-sticky>
        <div class="demo-nav" style>
          <div class="demo-nav__title" >我的收藏</div>
          <router-link :to="'/my_index'" class="demo-nav__back">
            <svg viewBox="0 0 1000 1000" >
              <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
              </path>
            </svg>
          </router-link>
        </div>
      </van-sticky>

      <van-tabs v-model="active">
        <van-tab title="施工攻略">
<!--            <div v-for="items in gonglv">-->
<!--              <van-image :src="items.strategyZhutuUrl" fit="cover" height="8rem" ></van-image>-->
<!--            </div>-->
          <div align="left" class="gallery-van-tab-a">
            <div class="gallery-van-tab-aa gallery-van-tab-aa-block" v-for="item in gonglv">
              <van-image :src="item.strategyZhutuUrl" @click="toDetails(item.constructionStrategyId)" fit="cover" height="8rem"></van-image>
              <div class="gallery-van-tab-a-content">
                <div>
                  <p align="left" style="font-size: 0.8rem;margin: 0;padding: 0.2rem 0">{{item.strategyTheme}}</p>
                </div>
                <div align="left" class="gallery-van-tab-b-contents">
                  <div class="van-tab-b-contents">
                    <van-image round width="1.2rem" height="1.2rem" :src="item.supplierPic" style="position: absolute;"/>
                    <span style="font-size: 0.4rem;margin-left: 1.5rem">{{item.shopsName}}</span>
                  </div>
                  <div class="van-tab-b-contents">
                    <van-icon v-if="item.status == 0" name="star-o" style="position: absolute"/>
                    <van-icon v-else="item.status == 1" name="star" style="position: absolute"/>

                    <span class="block-list-likes" style="font-size: 0.8rem;margin-left: 1.2rem">{{item.shoucangshu}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </van-tab>



        <van-tab title="免费图库">

          <div align="left" class="gallery-van-tab-a">
            <div class="gallery-van-tab-aa gallery-van-tab-aa-block" v-for="item in drawingList">
              <van-image :src="item.galleryInfoPic" fit="cover" height="8rem" @click="showOverlay(item.galleryInfoId,item.courseType)"></van-image>
              <div class="gallery-van-tab-a-content">
                <div>
                  <p align="left" style="font-size: 0.8rem;margin: 0;padding: 0.2rem 0">{{item.galleryInfoTitle}}</p>
                </div>
                <div align="left" class="gallery-van-tab-b-contents">
                  <div class="van-tab-b-contents">
                    <van-image round width="1.2rem" height="1.2rem" :src="item.licenseUrl" style="position: absolute;"/>
                    <span style="font-size: 0.4rem;margin-left: 1.5rem">{{item.shopsName}}</span>
                  </div>
                  <div class="van-tab-b-contents">
                    <van-icon v-if="item.courseType == 0" name="star-o" style="position: absolute"/>
                    <van-icon v-else="item.courseType == 1" name="star" style="position: absolute"/>

                    <span class="block-list-likes" style="font-size: 0.8rem;margin-left: 1.2rem">{{item.shoucangshu}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-overlay :show="show" @click="show = false">
            <div class="wrapper" @click.stop>
              <div class="block-text">
                <div class="block-text-share" align="right" style="padding: 0.5rem">
                  <van-icon name="share-o" color="#ffffff"/>
                </div>
                <div class="block-text-img">
                  <van-image :src="this.drawing.galleryInfoPic" fit="cover"height="12rem"  @click="show = true"></van-image>
                </div>
                <div class="block-text-content" align="left">
                  <div class="block-text-content-p">
                    <p>{{this.drawing.galleryInfoText}}</p>
                    <!--                <p @click="toText()">22查看原文 ></p>-->
                  </div>
                  <div class="block-text-content-cen">
                    <van-row span="8">
                      <van-col span="14">
                        <van-field v-model="value" placeholder="添加评论......" @keyup.enter="insertComment" class="block-text-content-cen-input"/>
                      </van-col>
                      <van-col span="8">
                        <van-row>
                          <van-col span="8">
                            <div align="center" style="padding-top: 0.3rem">
                              <!--                          <div><van-icon name="like-o" color="#ffffff" size="16"/></div>-->
                              <!--                          <div style="font-size: 1rem">{{this.drawing.galleryInfoFabulous}}</div>-->
                            </div>
                          </van-col>
                          <van-col span="8">
                            <div align="center" style="padding-top: 0.3rem">
                              <div @click="shoucang">


                                <van-icon v-if="this.courseTypeOne == 0" name="star-o" color="#ffffff" size="16"/>
                                <van-icon v-else="this.courseTypeOne == 1" name="star" color="#ffffff" size="16"/>
                              </div>
                              <div style="font-size: 1rem">{{this.drawing.shoucangshu}}</div>
                            </div>
                          </van-col>
                          <van-col span="8">
                            <div align="center" style="padding-top: 0.3rem" @click="showPopup">
                              <div><van-icon name="chat-o" color="#ffffff" size="16"/></div>
                              <div style="font-size: 1rem">{{this.drawing.galleryInfoReply}}</div>
                            </div>
                          </van-col>
                        </van-row>
                      </van-col>
                    </van-row>
                  </div>
                </div>

                <van-popup v-model="showP" closeable position="bottom" :style="{ height: '60%' }">
                  <div class="block-share">
                    <div class="block-share-top">
                      <p>全部评论{{this.galleryComment.length}}条</p>
                    </div>
                    <div class="block-share-list">
                      <div class="block-share-list-demo" v-for="comment in galleryComment">
                        <img src="https://img.yzcdn.cn/vant/logo.png">
                        <div class="list-demo-content">
                          <div>
                            <h3>{{comment.customerInfo.customerName}}</h3>
                            <p>{{comment.galleryCommentTime}}</p>
                          </div>
                          <p style="width: 70%;font-size: 0.7rem">{{comment.galleryCommentText}}</p>
                        </div>
                        <div class="block-share-list-like">
                          <!--                      <van-icon name="like-o"/>-->
                          <!--                      <span class="block-share-list-likes" style="font-size: 0.8rem">{{comment.galleryCommentFabulous}}</span>-->
                        </div>
                      </div>
                    </div>
                    <div class="block-share-bottom">
                      <van-cell-group>
                        <van-field v-model="commentText" clearable label="" left-icon="edit" placeholder="评论一下~" center style="background-color:#ebedf0;height:2.4rem;padding: 1rem;border-radius: 0.5rem" @keyup.enter="addComment" @click-left-icon="addComment"/>
                      </van-cell-group>
                    </div>
                  </div>
                </van-popup>
              </div>
            </div>
          </van-overlay>

        </van-tab>
      </van-tabs>



    </div>
</template>

<script>
  import { gonglvList } from "@/api/shougong";
  import { collectadd } from "@/api/collection";

  import { Toast } from "vant";
  import {
    selectGalleryInfoListByTypeThree,
    selectGalleryList,
    selectGalleryById,
    selectGalleryComment,
    insertGalleryComment
  } from "@/api/gallery/gallery.js";
    export default {
        name: "MyFavorite",
      components: {
        ItemStrategy: () => import("@/components/commons/ItemStrategy.vue"),
      ItemGoods: () => import("@/components/commons/ItemGoods.vue"),
    ItemGoodsDetails: () => import("@/components/commons/ItemGoodsDetails.vue"),
    },
      data(){
        return{
          form:{
            galleryInfoId:'',
          },
          courseTypeOne:'',
          show: false,
          showjian: false,
          value: '',
          showP: false,
          drawing: Object,
          galleryId: '',
          commentText:'',
          galleryComment: [],
          drawingList : [],
          gonglv:[],
        }
      },
      created() {
        this.getGalleryList();
        this.gongList();
      },
      methods: {



        toDetails(item){
          // console
          this.$router.push({ path:'/tupian',query:{constructionStrategyId:item}})
        },

        gongList(){
          gonglvList().then(res=>{
            console.log("***"+ JSON.stringify(res.data.rows))
            this.gonglv = res.data.rows;
          })
        },

        shoucang(){
          this.form.galleryInfoId = this.galleryId;
          collectadd(this.form).then(res=>{

            this.getGalleryList();
          })
        },

        getGalleryList(){

          // selectGalleryList("0").then((res) => {
          //   this.drawingList = res.data.data;
          // });
          selectGalleryInfoListByTypeThree().then(res=>{
            this.drawingList = res.data.rows;
          })
        },

        showOverlayer(galleryInfoId,courseType){
          this.courseTypeOne = courseType
          this.showjian = true;
          selectGalleryById(galleryInfoId).then((res) => {
            this.galleryId = res.data.data.galleryInfoId;
            this.drawing = res.data.data.galleryInfo;
          });
        },

        showOverlay(galleryInfoId,courseType){
          this.courseTypeOne = courseType
          this.show = true;
          selectGalleryById(galleryInfoId).then((res) => {
            this.galleryId = res.data.data.galleryInfoId;
            this.drawing = res.data.data.galleryInfo;
          });
        },
        showPopup() {
          this.showP = true;
          selectGalleryComment(this.galleryId).then((res) => {
            this.galleryComment = res.data.data;
          });
        },
        toText(){
          this.$router.push({ path:'/original_text',query:{galleryInfoId:this.galleryId}})
        },
        /** 添加评论 */
        addComment(){
          insertGalleryComment(this.galleryId,this.commentText).then((res) =>{
            if(res.code == 500){
              Toast("评论失败");
            }else{
              Toast("评论成功");
              this.reload();
            }
          })
        },
        insertComment(){
          insertGalleryComment(this.galleryId,this.value).then((res) =>{
            if(res.code == 500){
              Toast("评论失败");
            }else{
              Toast("评论成功");
              this.reload();
            }
          })
        }
      }
    }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 350;
    font-size: 1.2rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }



  .gallery-van-tab-aa{
    padding-bottom: 0.5rem;
  }
  .gallery-van-tab-b-contents{
    position: relative;
  }
  .van-tab-b-contents{
    display :inline-block;
  }
  .gallery-van-tab-aa-block{
    display: inline-block;
    width: 44%;
    position: relative;
    padding : 0.5rem
  }

  .block-text-img{
    margin-top: 10rem;
  }
  .block-text-content-cen-input{
    border-radius: 5rem;
    width: 10rem;
  }
  .block-text-content{
    color: white;
    font-size: 0.6rem;
    padding: 1rem;
    position: absolute;
    width: 100%;
    bottom: 5%;
  }
  .block-text-content-p p{
    padding: 0.3rem 0;
  }

  .block-share {
    width: 100%;
    height: 70%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    padding: 1rem 1rem 3.125rem 1rem;
    overflow: auto;
    text-align: left;
  }

  .block-share .block-share-top{
    padding-left: 1rem;
    font-weight: 700;
  }

  .block-share .block-share-bottom{
    width: 85%;
    position: fixed;
    bottom: 0rem;
    padding: 0.7rem;
    background-color: white;
  }

  .block-share .block-share-list{
    padding: 1rem 1.5rem;
  }

  .block-share .block-share-list .block-share-list-demo{
    padding: 1rem 0;
    position: relative;
  }

  .block-share .block-share-list .block-share-list-demo{
    margin-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo{
    padding-top: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-demo .block-share-list-demos img{
    width: 1rem;
    height: 1rem;
  }

  .block-share .block-share-list .block-share-list-demo img{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    float: left;
    margin: 0;
  }
  .block-share .block-share-list .list-demo-content{
    margin-left: 0.5rem;
    width: 70%;
    display: inline-block;
  }
  .block-share .block-share-list .list-demo-content div{
    padding-bottom: 0.5rem;
  }
  .block-share .block-share-list .list-demo-content div h3{
    font-size: 0.75rem;
  }
  .block-share .block-share-list .list-demo-content div p{
    font-size: 0.5rem;
  }
  .block-share .block-share-list .block-share-list-like{
    display: inline-block;
  }

</style>
